<template>
  <div class="help-create-container">
    <h2 class="title">發布新帖子</h2>
    <!-- 新增：視頻上傳區域 -->
    <el-upload
      class="video-uploader"
      action="http://localhost:10010/eduvod/video/uploadAliyunVideo"
      :show-file-list="false"
      :on-success="handleVideoSuccess"
      :headers="uploadHeaders"
      :accept="'video/*'"
      style="margin-bottom: 20px;"
    >
      <el-button type="primary">上傳視頻</el-button>
      <span v-if="form.videoId" style="margin-left: 12px; color: #67c23a;">已上傳視頻</span>
    </el-upload>
    <el-form :model="form" class="post-form">
      <el-form-item label="內容">
        <el-input
          type="textarea"
          v-model="form.content"
          :rows="5"
          placeholder="請輸入你要發佈的內容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitPost">發佈</el-button>
      </el-form-item>
    </el-form>
    <div class="back-link">
      <router-link to="/help">返回論壇</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const form = ref({ content: '', videoId: '' })
const uploadHeaders = { Authorization: 'Bearer ' + (localStorage.getItem('token') || '') }
const handleVideoSuccess = (response) => {
  if (response.data && response.data.videoId) {
    form.value.videoId = response.data.videoId
  }
}
const submitPost = async () => {
  if (!form.value.content) {
    ElMessage.error('請輸入內容')
    return
  }
  try {
    const res = await axios.post('http://localhost:10010/eduservice/edu-comment/auth/addComment', {
      content: form.value.content,
      videoId: form.value.videoId
    }, {
      headers: { Authorization: 'Bearer ' + (localStorage.getItem('token') || '') }
    })
    if (res.data && res.data.success) {
      ElMessage.success('發佈成功！')
      // 你可以在這裡跳轉或清空表單
    } else {
      ElMessage.error(res.data.message || '發佈失敗')
    }
  } catch (e) {
    ElMessage.error('發佈失敗')
  }
}
</script> 